<template>
  <!-- 首页 -->
  <div class="Hcont" v-if="homepage === 1">
    <!-- 头部导航 -->
    <div class="Hhead" @click="toHcont">
      <div class="hd1">
        <img src="../assets/logo3.png" alt="系统logo" class="hd11">
        <div class="hd12 noselect">
          <div class="hd121">智能配送</div>
          <div class="hd122">Intelligent Distribution</div>
        </div>
      </div>
      <img src="../assets/work.png" alt="工作图标" class="hd2">
      <div class="hd4"></div>
      <div class="hd3">
        <img src="../assets/tou.png" alt="用户头像" class="hd31">
        <el-dropdown>
          <span class="el-dropdown-link noselect xiaoshou" @click.stop>
            Qin<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Postcard">个人信息</el-dropdown-item>
              <el-dropdown-item :icon="User" @click="customer">AI客服</el-dropdown-item>
              <el-dropdown-item :icon="Setting">设置</el-dropdown-item>
              <el-dropdown-item :icon="Switch">切换账号</el-dropdown-item>
              <el-dropdown-item :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <div class="hb"></div>
    
    <!-- 主体内容 -->
    <div class="Hbody">
      <!-- 左侧菜单 -->
      <div class="bdl">
        <div class="bdl1">
          <div class="bdl11 noselect xiaoshou" @click="uav" :class="{ 'active-nav': homepage === 2 }">
            <img src="../assets/UAV.png" alt="" class="bdl111">
            <div class="bdl112">无人机管理</div>
          </div>
          <div class="bdl12 noselect xiaoshou" @click="mm" :class="{ 'active-nav': homepage === 3 }">
            <img src="../assets/MM.png" alt="" class="bdl121">
            <div class="bdl122">商户管理</div>
          </div>
          <div class="bdl13 noselect xiaoshou" @click="task" :class="{ 'active-nav': homepage === 4 }">
            <img src="../assets/task.png" alt="" class="bdl131">
            <div class="bdl132">任务管理</div>
          </div>
          <div class="bdl14 noselect xiaoshou"  @click="map" :class="{ 'active-nav': homepage === 5 }">
            <img src="../assets/map.png" alt="" class="bdl141">
            <div class="bdl142">地图与空域管理</div>
          </div>
          <div class="bdl15 noselect xiaoshou" @click="alarm" :class="{ 'active-nav': homepage === 6 }">
            <img src="../assets/alarm.png" alt="" class="bdl151">
            <div class="bdl152">告警中心</div>
          </div>
        </div>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="bdr">
        <!-- 数据概览卡片 -->
        <div class="overview-cards">
          <div class="card" style="background-color: #409EFF">
            <div class="card-title">在线无人机</div>
            <div class="card-value">{{ droneStats.online }}</div>
            <div class="card-change">
              <i class="el-icon-arrow-up"></i> {{ droneStats.onlineChange }}%
            </div>
          </div>
          
          <div class="card" style="background-color: #67C23A">
            <div class="card-title">今日完成订单</div>
            <div class="card-value">{{ orderStats.completed }}</div>
            <div class="card-change">
              <i class="el-icon-arrow-up"></i> {{ orderStats.completedChange }}%
            </div>
          </div>
          
          <div class="card" style="background-color: #E6A23C">
            <div class="card-title">配送中订单</div>
            <div class="card-value">{{ orderStats.inProgress }}</div>
            <div class="card-change">
              <i class="el-icon-arrow-down"></i> {{ orderStats.inProgressChange }}%
            </div>
          </div>
          
          <div class="card" style="background-color: #F56C6C">
            <div class="card-title">告警数量</div>
            <div class="card-value">{{ alarmStats.count }}</div>
            <div class="card-change">
              <i class="el-icon-arrow-up"></i> {{ alarmStats.change }}%
            </div>
          </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="charts-container">
          <div class="chart-wrapper">
            <div class="chart-header">
              <div class="chart-title">近7日订单趋势</div>
              <div class="chart-filter">
                <el-radio-group v-model="orderTrendFilter" size="small">
                  <el-radio-button label="day">按日</el-radio-button>
                  <el-radio-button label="week">按周</el-radio-button>
                  <el-radio-button label="month">按月</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="chart-content">
              <!-- 图表占位 -->
              <div class="chart-placeholder">
                <canvas id="orderTrendChart"></canvas>
              </div>
            </div>
          </div>
          
          <div class="chart-wrapper">
            <div class="chart-header">
              <div class="chart-title">无人机状态分布</div>
              <div class="chart-filter">
                <el-button size="small" type="primary" icon="Refresh">刷新</el-button>
              </div>
            </div>
            <div class="chart-content">
              <!-- 图表占位 -->
              <div class="chart-placeholder">
                <canvas id="droneStatusChart"></canvas>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最近任务表格 -->
        <div class="task-table-container">
          <div class="table-header">
            <div class="table-title">最近配送任务</div>
            <el-button size="small" type="primary" icon="Plus" @click="createTask">创建任务</el-button>
          </div>
          
          <el-table :data="recentTasks" stripe style="width: 100%">
            <el-table-column prop="id" label="任务ID"></el-table-column>
            <el-table-column prop="droneId" label="无人机ID"></el-table-column>
            <el-table-column prop="merchant" label="商户"></el-table-column>
            <el-table-column prop="customer" label="客户"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="mini" type="text" @click="viewTask(scope.row.id)">查看</el-button>
                <el-button size="mini" type="text" @click="editTask(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalTasks">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Postcard, User, Setting, Switch, SwitchButton, 
  ArrowDown
} from '@element-plus/icons-vue'

// 导入图表库
import Chart from 'chart.js/auto'

const router = useRouter()

// 页面状态与DOM引用
const homepage = ref(1) // 当前为首页



// 数据统计
const droneStats = ref({
  online: 12,
  onlineChange: 3.5
})

const orderStats = ref({
  completed: 156,
  completedChange: 8.2,
  inProgress: 24,
  inProgressChange: 2.1
})

const alarmStats = ref({
  count: 3,
  change: 1
})

// 订单趋势过滤
const orderTrendFilter = ref('day')

// 最近任务数据
const recentTasks = ref([
  {
    id: 'T20250715001',
    droneId: 'UAV-007',
    merchant: '美味餐厅',
    customer: '李先生',
    status: '配送中',
    createTime: '2025-07-15 10:30'
  },
  {
    id: 'T20250715002',
    droneId: 'UAV-012',
    merchant: '咖啡时光',
    customer: '王女士',
    status: '已完成',
    createTime: '2025-07-15 10:15'
  },
  {
    id: 'T20250715003',
    droneId: 'UAV-003',
    merchant: '水果之家',
    customer: '张先生',
    status: '已完成',
    createTime: '2025-07-15 09:45'
  },
  {
    id: 'T20250715004',
    droneId: 'UAV-009',
    merchant: '面包工坊',
    customer: '赵小姐',
    status: '待分配',
    createTime: '2025-07-15 09:30'
  },
  {
    id: 'T20250715005',
    droneId: 'UAV-005',
    merchant: '生鲜超市',
    customer: '陈先生',
    status: '已完成',
    createTime: '2025-07-15 09:10'
  }
])

// 分页控制
const currentPage = ref(1)
const pageSize = ref(10)
const totalTasks = ref(50)

// 导航方法（左侧菜单+头部跳转）
const toHcont = () => { homepage.value = 1; router.push('/HomeViews') }
const uav = () => { homepage.value = 2; router.push('/navViews') }    // 无人机管理
const mm = () => { homepage.value = 3; router.push('/mmViews') }      // 商户管理
const task = () => { homepage.value = 4; router.push('/taskViews') }  // 任务管理
const map = () => { homepage.value = 5; router.push('/mapViews') }    // 地图管理
const alarm = () => { homepage.value = 6; router.push('/alarmViews') } // 告警中心
const customer = () => { router.push('/chatViews') }                  // AI客服

// 任务操作
const createTask = () => {
  router.push('/taskViews/create')
}

const viewTask = (id) => {
  router.push(`/taskViews/detail/${id}`)
}

const editTask = (id) => {
  router.push(`/taskViews/edit/${id}`)
}

// 分页控制
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

// 获取状态标签类型
const getStatusType = (status) => {
  switch(status) {
    case '待分配':
      return 'info'
    case '配送中':
      return 'primary'
    case '已完成':
      return 'success'
    case '已取消':
      return 'danger'
    case '异常':
      return 'warning'
    default:
      return 'info'
  }
}

// 图表初始化
onMounted(() => {
  // 订单趋势图表
  const orderTrendCtx = document.getElementById('orderTrendChart').getContext('2d')
  const orderTrendChart = new Chart(orderTrendCtx, {
    type: 'line',
    data: {
      labels: ['7/9', '7/10', '7/11', '7/12', '7/13', '7/14', '7/15'],
      datasets: [{
        label: '完成订单',
        data: [120, 135, 142, 128, 145, 150, 156],
        borderColor: '#67C23A',
        backgroundColor: 'rgba(103, 194, 58, 0.1)',
        tension: 0.3,
        fill: true
      }, {
        label: '总订单',
        data: [130, 145, 150, 140, 155, 160, 165],
        borderColor: '#409EFF',
        backgroundColor: 'rgba(64, 158, 255, 0.1)',
        tension: 0.3,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })
  
  // 无人机状态分布图表
  const droneStatusCtx = document.getElementById('droneStatusChart').getContext('2d')
  const droneStatusChart = new Chart(droneStatusCtx, {
    type: 'doughnut',
    data: {
      labels: ['飞行中', '待命', '充电中', '维护中'],
      datasets: [{
        data: [8, 5, 3, 2],
        backgroundColor: [
          '#409EFF',
          '#67C23A',
          '#E6A23C',
          '#F56C6C'
        ],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'right',
        }
      },
      cutout: '70%'
    }
  })
  
  // 监听窗口大小变化，调整图表
  window.addEventListener('resize', () => {
    orderTrendChart.resize()
    droneStatusChart.resize()
  })
})
</script>

<style scoped>
/* 基础样式 */
.Hcont{
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    width: 97vw;
    height: 98vh;
    overflow: hidden;
    background-color: rgb(239, 239, 238);
}
.Hhead{
  height: 100px;
  width: 100%;
  background-color: rgb(86, 119, 231);
  display: flex;
  flex: none;
  align-items: center;
}
.hd1{
  display: flex;
  margin-left: 60px;
}
.hd11{
  width: 60px;
  border-radius: 100%;
  margin-right: 20px;
}
.hd12{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hd121{
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 3px;
  color: white;
}
.hd122{
  font-size: 12px;
  color: white;
}
.hd2{
  margin-left: 100px;
  width: 70px;
  margin-top: 30px;
}
.hd3{
  margin-right: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hd31{
  width: 50px;
  border-radius: 100%;
  margin-right: 10px;
}
.el-dropdown-link{
  color: white;
   outline: none;
}
.hd4{
  flex: 1;
}
.hb{
  width: 100%;
  height: 1px;
  flex: none;
}
.Hbody{
   display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bdl{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 280px;
  background-color: rgb(30, 58, 138);
}
.bdl1{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 50px;
}
.bdl11,.bdl12,.bdl13,.bdl14,.bdl15{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.bdl11:hover,.bdl12:hover,.bdl13:hover,.bdl14:hover,.bdl15:hover{
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px); 
  background-color: rgb(156, 188, 249);
  border-radius: 10px;
}
.bdl11:active,.bdl12:active,.bdl13:active,.bdl14:active,.bdl15:active{
  transform: scale(0.97);
  box-shadow: 0 4px 6px -1px rgba(93, 102, 122, 0.1);
}
.bdl111,.bdl121,.bdl131,.bdl141,.bdl151{
  width: 20px;
  padding-right: 10px;
}
.bdl112,.bdl122,.bdl132,.bdl142,.bdl152{
  font-size: 24px;
  font-weight: 400;
  color: white;
}

.active-nav {
  background-color: rgb(156, 188, 249);
  border-radius: 10px;
}

.bdr {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 新增样式 */
.overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.card {
  padding: 20px;
  border-radius: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-change {
  font-size: 14px;
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-wrapper {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-title {
  font-size: 18px;
  font-weight: 500;
}

.chart-content {
  height: 300px;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
}

.task-table-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-title {
  font-size: 18px;
  font-weight: 500;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>  